<template>
  <view class="etc-box">
    <view v-for="item in list" :key="item">
      <ve-card :title="`ETC订单号：${item.orderCode}`" type="none" :fold="true" v-model:initFold="item.initFold">
        <!-- 订单标签 -->
        <view class="order-tag-list" v-if="item.orderLabel">
          <view class="order-tag-item">
            {{ item.orderLabel }}
          </view>
        </view>
        <ve-cell label="ETC设备号">{{ item.etcCode || '-' }}</ve-cell>
        <ve-cell label="车辆信息">
          <view>
            <view>{{ item.licenseNo }}</view>
            <view>{{ item.carModelName }}</view>
          </view>
        </ve-cell>
        <ve-cell label="所属门店">{{ item.siteName || '-' }}</ve-cell>
        <ve-cell label="ETC订单状态">{{ item.orderStatusName || '-' }}</ve-cell>
        <ve-cell label="下单人手机号">{{ item.mobile || '-' }}</ve-cell>
        <ve-cell label="ETC订单周期">
          <view>
            <view v-if="item.actualStartTime">实际开始: {{ item.actualStartTime }}</view>
            <view v-if="item.endTime">预计结束: {{ item.endTime }}</view>
            <view v-if="item.actualEndTime">实际结束: {{ item.actualEndTime }}</view>
          </view>
        </ve-cell>
        <ve-cell label="ETC租期">{{ item.rentDays || '-' }}</ve-cell>
        <ve-cell-price label="ETC租赁费用" :value="item.amt"></ve-cell-price>
        <ve-cell label="下单时间">{{ item.orderCreateTime || '-' }}</ve-cell>
      </ve-card>
    </view>
    <ve-empty v-if="list.length == 0"></ve-empty>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { getEtcOrder } from '@/api/order/order'

  const props = defineProps({
    orderId: {
      type: String,
      default: '',
    },
    orderType: {
      type: String,
      default: '',
    },
  })

  const list = ref<any>([])
  const queryParam = ref<any>({})

  /** 获取etc列表 */
  const getEtcOrderList = async () => {
    queryParam.value.refId = props.orderId
    queryParam.value.refType = props.orderType
    const res = (await getEtcOrder(queryParam.value)) as any
    res.result.forEach((item: any) => {
      item.initFold = true
    })
    list.value = res.result
  }

  onMounted(() => {
    getEtcOrderList()
  })
</script>

<style lang="less" scoped>
  .etc-box {
    padding: 24rpx 24rpx;
  }

  .order-tag-list {
    padding: 14rpx 0 6rpx;
    line-height: 1;
    .order-tag-item {
      height: 32rpx;
      line-height: 32rpx;
      box-sizing: content-box;
      display: inline-block;
      font-size: 24rpx;
      padding: 0rpx 12rpx;
      border-radius: 18rpx;
      border: 2rpx solid #f5d6a2;
      color: #e59b1c;
      margin-right: 20rpx;
      // margin-bottom: 8rpx;
    }
  }
</style>
